<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>rem字体自适应大小demo</title>
	<style>
		body {
			margin: 0;
			font-size: .7rem;
		}

		header,
		footer {
			position: fixed;
			width: 100vw;
			color: #fff;
			text-align: center;
		}

		header {
			top: 0;
			height: 2.2rem;
			line-height: 2.2rem;
			background: #c00;
		}

		footer {
			
			bottom: 0;
			height: 2.5rem;
			line-height: 2.5rem;
			background: #222;

		}

		section {
			position: fixed;
			width: 100vw;
			top: 2.2rem;
			bottom: 2.5rem;
			overflow-y: scroll;

		}
	</style>
	<script src="resize.js"></script>
</head>
<body>
	<header>header</header>
	<section>
		<p style="font-size:1rem">内容内容</p>
		<p style="font-size:1rem">内容内容</p>
		<p>内容内容</p>
	</section>
	<footer>footer</footer>
</body>
</html>